import React, { useEffect, useState } from 'react'
import { getBlogList, deleteBlog } from '@/api'
import style from './index.module.scss'
import { showTime } from '@/utils/utils'
import { EditFilled, MessageFilled, DeleteFilled } from '@ant-design/icons'
import { Tooltip, Popconfirm, message, Modal } from 'antd'
import { useHistory } from 'react-router-dom'
import CommentManage from '../commentManage'
export default () => {
  const history = useHistory()
  const [blogModal, setBlogModal] = useState({
    show: false,
    id: 0,
    title: '',
  })
  const [list, setList] = useState<BlogList[]>([])
  const getAllList = async () => {
    const { data } = await getBlogList({
      pageNum: 0,
      size: 10,
    })
    setList(data)
  }
  const deleteBlogFn = async (id: number, index: number) => {
    const { status, msg } = await deleteBlog({ blogId: id })
    if (status) {
      const listCopy = JSON.parse(JSON.stringify(list))
      listCopy.splice(index, 1)
      setList(listCopy)
      message.success('删除成功')
    } else {
      message.warning(msg)
    }
  }
  const toDetail = () => {
    history.push(`/detail/${blogModal.id}`)
  }
  const toDetailList = (id: number) => {
    history.push(`/detail/${id}`)
  }

  useEffect(() => {
    getAllList()
  }, [])
  return (
    <div className={style.manage}>
      <Modal
        title={
          <div className={style.title_row}>
            <span className={style.title} onClick={toDetail}>
              {blogModal.title}
            </span>
          </div>
        }
        visible={blogModal.show}
        className={style.modal_row}
        footer={null}
        width="60%"
        onCancel={() => {
          setBlogModal({
            ...blogModal,
            show: false,
          })
        }}
      >
        <div className={style.modal}>
          <CommentManage blogId={blogModal.id} blogTitle={blogModal.title} />
        </div>
      </Modal>
      <div className={style.list_row}>
        {list.length ? (
          list.map((el, index) => {
            return (
              <div className={style.list} key={el.blogId}>
                <div
                  onClick={() => {
                    return toDetailList(el.blogId)
                  }}
                  className={style.title}
                >
                  {el.title}
                </div>
                <div className={style.time}>{showTime(el.creationTime)}</div>
                <div className={style.right}>
                  <Tooltip title="编辑">
                    <EditFilled
                      className={style.icon}
                      onClick={() => {
                        message.warn('暂未开通')
                        return
                        /*                         history.push({
                          pathname: 'newadd',
                          state: {
                            id: el.blogId,
                          },
                        })
 */
                      }}
                    />
                  </Tooltip>
                  <Tooltip title="评论">
                    <MessageFilled
                      onClick={() =>
                        setBlogModal({
                          show: true,
                          id: el.blogId,
                          title: el.title,
                        })
                      }
                      className={style.icon}
                    />
                  </Tooltip>

                  <Popconfirm
                    placement="topRight"
                    title={'确定要删除这篇文章吗?'}
                    onConfirm={() => deleteBlogFn(el.blogId, index)}
                    okText="删除"
                    cancelText="取消"
                  >
                    <Tooltip title="删除">
                      <DeleteFilled className={style.icon} />
                    </Tooltip>
                  </Popconfirm>
                </div>
              </div>
            )
          })
        ) : (
          <div
            style={{
              textAlign: 'center',
            }}
          >
            暂无内容
          </div>
        )}
      </div>
    </div>
  )
}
